    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
        <%@ page language="java" contentType="text/html; charset=UTF-8"
                 pageEncoding="UTF-8" %>
        <!DOCTYPE html>
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Highcharts export server</title>
        <link rel="stylesheet" type="text/css" href="resources/css/demo.css" />
        <link rel="stylesheet" type="text/css"
        href="resources/lib/codemirror/codemirror.css" />
        <script src="resources/lib//jquery-1.11.0.min.js"></script>
        <script src="resources/lib/codemirror/codemirror.js"></script>
        <script src="resources/lib/codemirror/mode/javascript/javascript.js"></script>
        <script src="resources/lib/codemirror/mode/xml/xml.js"></script>
        <script>
        $(document).ready(function() {

        var enableEditor = function(id) {
        if (id === 'options') {
        CodeMirror.fromTextArea($('textarea#options')[0], {
        lineNumbers : true,
        matchBrackets : true,
        tabMode : "indent",
        mode : "text/javascript",
        lineWrapping : true
        });
        } else {
        // options for svg editor
        CodeMirror.fromTextArea($('textarea#svg')[0], {
        lineNumbers : true,
        mode : {
        name : "xml",
        alignCDATA : true
        },
        matchBrackets : true,
        tabMode : "indent",
        lineWrapping : true
        });
        }
        };

        // attach eventhandler to radio fields
        $('input[type="radio"]').change(function() {
        var checked = this.id, other, html;
        // which editor is checked/ should be visible
        checked === 'svg' ? other = 'options' : other = 'svg';
        // get html source from the div outside of the form
        $('div#' + checked).html($('div#toggle').html());
        /* move the html of the previous editor outside the form,
        remove first Codemirror wrapper */
        $('div#' + other + ' div.CodeMirror-wrap').remove();

        $('div#toggle').html($('div#' + other).html());
        // empty the container which held the previous editor.
        $('div#' + other).html('');
        // enable codemirror for texarea
        enableEditor(checked);

        });

        // default radio #config is selected
        $('input#options').prop('checked', true);

        enableEditor('options');

        // syntax coloring, indent from codemirror
        // callback editor
        CodeMirror.fromTextArea($('textarea#callback')[0], {
        id : 'test',
        lineNumbers : true,
        matchBrackets : true,
        tabMode : "indent",
        mode : "text/javascript",
        lineWrapping : true
        });

        });
        </script>
        </head>
        <body>
        <div id="top">
        <a href="http://www.highcharts.com" title="Highcharts Home Page"
        id="logo"><img alt="Highcharts Home Page"
        src="resources/Highcharts-icon-160px.png" border="0"></a>
        <h1>Highcharts Export Server</h1>
        </div>
        <div id="wrap">
        <form id="exportForm" action="./" method="POST">
        <p>Use this page to experiment with the different options.</p>

        <input id="options" title="Highcharts config object" type="radio"
        name="content" value="options"> <label for="options"
        class="radio">Highcharts config object (JSON)</label> <input
        id="svg" title="svg xml content" type="radio" name="content"
        value="svg"> <label for="svg" class="radio">SVG
        (XML) </label>

        <div id="options">
        <label id="options" for="options">Options</label>
        <div id="oneline" class="info">Specify here your Highcharts
        configuration object.</div>
        <textarea id="options" name="options" rows="12" cols="30"><%@include
            file="/WEB-INF/jspf/config.js" %></textarea>
        </div>
        <div id="svg"></div>
        <label for="type">Image file format</label> <select name="type">
        <option value="image/png">image/png</option>
        <option value="image/jpeg">image/jpeg</option>
        <option value="image/svg+xml">image/svg+xml</option>
        <option value="application/pdf">application/pdf</option>
        </select> <br /> <label for="width">Width</label>
        <div class="info">The exact pixelwidth of the exported image.
        Defaults to chart.width or 600px. Maximum width is set to 2000px</div>
        <input id="width" name="width" type="text" value="" /> <br/> <label
        for="scales">Scale</label> <input id="scale" name="scale"
        type="text" value="" />
        <div class="info">Give in a scaling factor for a higher image
        resolution. Maximum scaling is set to 4x. Remember that the width parameter has a higher
        precedence over scaling.</div>
        <br /> <label for="constructor">Constructor</label>
        <div class="info">
        This will be either 'Chart' or 'StockChart' depending on if <br />you
        want a Highcharts or an HighStock chart.
        </div>
        <select name="constr">
        <option value="Chart">Chart</option>
        <option value="StockChart">StockChart</option>
        </select> </br> <br /> <label for="callback">Callback</label>
        <div id="oneline" class="info">The callback will be fired after
        the chart is created.</div>
        <textarea id="callback" name="callback" rows="12" cols="30" />
        <%@include
                file="/WEB-INF/jspf/callback.js" %>
        </textarea>
        <input id="submit" type="submit" value="Generate Image">
        </form>
        </div>
        <div id="toggle">
        <label id="svg" for="svg">Svg Content</label>
        <div id="oneline" class="info">Paste in 'raw' svg markup.</div>
        <textarea id="svg" name="svg" rows="12" cols="30">
        <%@include
                file="/WEB-INF/jspf/lexl.svg" %>
        </textarea>
        </div>
        </body>
        </html>
